<template>
  <div class="container">
    <!--  -->
    <!-- 左侧主要内容展示区 -->
    <div class="left">
      <div class="label">Authority 组件</div>
      <div class="text">权限控制的组件</div>

      <div class="label">组件效果</div>

      <FoldPanel>
        <template #top>
          <div
            style="display: flex; justify-content: space-around; width: 300px"
          >
            <Authority :userRight="['add', 'update', 'read']">
              <template #default="{ userRight }">
                <el-button
                  type="primary"
                  :disabled="!userRight.includes('add')"
                >
                  add
                </el-button>
                <el-button type="warning">update</el-button>
                <el-button
                  type="danger"
                  :disabled="!userRight.includes('delete')"
                >
                  delete
                </el-button>
              </template>
            </Authority>
          </div>
        </template>
        <template #bottom>
          <HtmlShower :htmlStr="htmlStr1"></HtmlShower>
        </template>
      </FoldPanel>
    </div>

    <!--  -->
    <!-- 右侧辅助功能栏 -->
    <div class="right">右侧辅助功能栏</div>
  </div>
</template>

<script lang="tsx" setup>
import { Authority, HtmlShower, FoldPanel } from '@/customComponents/components'

const htmlStr1 = `
      <div style="display: flex; justify-content: space-around; width: 300px">
        <Authority :userRight="['add', 'update', 'read']">
          <template #default="{ userRight }">
            <el-button type="primary" :disabled="!userRight.includes('add')">
              add
            </el-button>
            <el-button type="warning">update</el-button>
            <el-button type="danger" :disabled="!userRight.includes('delete')">
              delete
            </el-button>
          </template>
        </Authority>
      </div>
`
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;

  > .left {
    width: 76%;
  }
  > .right {
    width: 24%;
  }
}

.label {
  font-size: 17px;
  color: #606266;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  padding-top: 30px;
  padding-bottom: 10px;
}

.text {
  line-height: 28px;
  letter-spacing: 1px;
  color: #444444;
  font-weight: b;
}
</style>
